$(document).ready(function() {
    var lunbo1_down = document.getElementsByClassName('lunbo1_down')[0];
    var lunbo1_downlb = document.getElementsByClassName(' lunbo1_downlb')[0];
    var lb1 = document.getElementsByClassName('lb1')[0];
    var control1 = document.getElementsByClassName('control1')[0];
    var arr1 = document.getElementsByClassName('arr1')[0];
    var arr1_left = document.getElementsByClassName('arr1_left')[0];
    var arr1_right = document.getElementsByClassName('arr1_right')[0];
    var lunbo1_zi = document.getElementsByClassName('lunbo1_zi')[0];
    var wz1 = document.getElementsByClassName('wz1')[0];
    var newLi = lb1.children[0].cloneNode(true);
    lb1.append(newLi);
    var newLi = lb1.children[1].cloneNode(true);
    lb1.append(newLi);
    var newLi = lb1.children[2].cloneNode(true);
    lb1.append(newLi);
    var newLi = wz1.children[0].cloneNode(true);
    wz1.append(newLi);
    var newLi = wz1.children[1].cloneNode(true);
    wz1.append(newLi);
    var newLi = wz1.children[2].cloneNode(true);
    wz1.append(newLi);
    lb1.style.width = lb1.children.length * lunbo1_downlb.offsetWidth + 'px';
    wz1.style.width = wz1.children.length * lunbo1_zi.offsetWidth + 'px';
    for (var i = 0; i < lb1.children.length - 3; i++) {
        var li = document.createElement('li');
        control1.append(li);
    }

    control1.children[0].className = 'active';
    var key = 0;
    var square = 0;
    var word = 0;
    var ever = setInterval(autoPlay, 3000);

    function autoPlay() {
        key++;
        if (key > lb1.children.length - 3) {
            key = 1;
            lb1.style.left = 0;
        }

        animate(lb1, -lunbo1_downlb.offsetWidth * key);

        word++;
        if (word > lb1.children.length - 3) {
            word = 1;
            wz1.style.left = 0;
        }

        animate(wz1, -lunbo1_zi.offsetWidth * word);

        square++;
        if (square > control1.children.length - 1) {
            square = 0;
        }
        for (var i = 0; i < control1.children.length; i++) {
            control1.children[i].className = '';
        }
        control1.children[square].className = 'active';

    }


    lunbo1_down.onmouseover = function() {
        clearInterval(ever);
        arr1.style.display = 'block'
        
    }


    lunbo1_down.onmouseout = function() {
        ever = setInterval(autoPlay, 3000);
        arr1.style.display = 'none';
    }

    for (var i = 0; i < control1.children.length; i++) {
        control1.children[i].index = i;
        control1.children[i].onmouseover = function() {
            for (var i = 0; i < control1.children.length; i++) {
                control1.children[i].className = '';
            }
            this.className = 'active';
            console.log(this.index);
            word = square = key = this.index;

            animate(lb1, -this.index * lunbo1_downlb.offsetWidth)
            animate(wz1, -this.index * lunbo1_zi.offsetWidth)
        }
    }


    arr1_left.onclick = function() {
        key--;
        if (key < 0) {
            key = lb1.children.length - 3;
            lb1.style.left = -key * lunbo1_downlb.offsetWidth + 'px';
            key--
        }

        animate(lb1, -key * lunbo1_downlb.offsetWidth)

        word--;
        if (word < 0) {
            word = wz1.children.length - 3;
            wz1.style.left = -word * lunbo1_zi.offsetWidth + 'px';
            word--
        }

        animate(wz1, -word * lunbo1_zi.offsetWidth)

        square--;
        if (square < 0) {
            square = control1.children.length - 3;
        }
        console.log(square);
        for (var i = 0; i < control1.children.length; i++) {
            control1.children[i].className = '';
        }
        control1.children[square].className = 'active';
    }

    arr1_right.onclick = function() {
        autoPlay();
    }


    function animate(ele, target) {
        clearInterval(timer);
        var speed = target > ele.offsetLeft ? 10 : -10;

        var timer = setInterval(function() {

            var distance = target - ele.offsetLeft;

            if (Math.abs(distance) > Math.abs(speed)) {
                ele.style.left = ele.offsetLeft + speed + 'px';
            } else {
                ele.style.left = target + 'px';
                clearInterval(timer);
            }

        }, 10);

    }
})